<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件通信</title>
    <script src="../../js/common/vue/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>父组件的：{{message}}</h2>
    <cpn
            :props_son_make="message"
            @son-method-change="methodChange"
    />
</div>
<template id="template1">0
    <div>
<!--      v-mode 动态绑定    @input input 输入框的输入监听事件 -->
        <input type="text" v-model="sonMake" @input="redact">
        <h2>子组件_props：{{props_son_make}}</h2>
        <h2>子组件_子自己定义的变量：{{sonMake}}</h2>
    </div>
</template>
<script>
    const app = new Vue({
        el: '#app'
        , data: {
            message: 'vue实例'
        }
        ,methods:{
            methodChange(value){
                this.message =value;
            }
        }
        //定义一个子组件 。
        , components: {
            cpn: {
                template: '#template1'
                , props: {
                    props_son_make:{
                        type:String
                    }

                }
                /*组件的数据区必须是一个函数，函数可以将该变量私有化。
                避免多个组件一起啊使用时修改其中一个组件的值其他组件也一起修改了*/
                /**
                * 为什么在props中建立了 父子组件的绑定还要单独在子组件中的数据区区创建一个变量来存父组件存的值呢？
                 * 因为在子组件中修改父组件传过来的值的时候，父组件也会有修改，父子组件同时修改时，这个值就会发生冲突。
                 * 所以在子组件中对值的修改从以子组件的props为主，转移到了以修改的编辑框位置，只要编辑框修改了在把修改传递到父子组件中
                 * 不过这也没有解决父子组件同时修改一个值到底以哪个为准的矛盾啊。
                 * 那是不是因为编辑框修改值后会发布到父子组件中，所以就都以编辑框为主了？
                 * 输入框修改时去修改的子组件中的data中变量，不是props中的变这时已经解绑了，和父组件的值没有关系了。O(∩_∩)O哈哈~
                 *
                * */
                , data(){
                    return{
                        sonMake:this.props_son_make
                    }
                }
                ,methods: {
                    redact(event) {
                        //将修改的值赋值给 props中的参数。
                        this.sonMake = event.target.value;
                        //赋值给父组件中的参数。
                        this.$emit('son-method-change',this.sonMake);
                    }
                }
            }

        }
    })
</script>
</body>
</html>